<!--
 * @Descripttion: 
 * @Author: Wang Dejiang(aei)
 * @Date: 2022-04-16 15:48:34
 * @LastEditors: Wang Dejiang(aei)
 * @LastEditTime: 2022-05-04 00:37:49
-->
<template>
  <div
    class="header"
    style="position: fixed; top: 0; width: 100%; cursor: pointer"
  >
    <div style="display: flex; align-items: center" @click="goHome">
      <img
        src="../assets/image/zxjs.png"
        alt="homeIcon"
        style="width: 32px; margin: 0 10px 0 20px"
      />
      <div
        style="
          display: inline-block;
          font-size: 20px;
          font-family: 'Bauhaus-Bold';
          transform: translateY(5px);
          color: #ffd04b;
        "
      >
        ZXJS
      </div>
    </div>
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        :mode="menuMode"
        background-color="#2F3338"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="border-bottom: 0; height: 48px"
        @select="handleSelect"
        :ellipsis="false"
        :router="true"
      >
        <el-menu-item style="font-size: 18px" index="guide">起步</el-menu-item>
        <el-menu-item style="font-size: 18px" index="apis"
          >API文档</el-menu-item
        >
        <!-- <el-menu-item style="font-size: 18px" index="about">关于</el-menu-item> -->
        <el-menu-item style="font-size: 18px"
          ><a href="https://gitee.com/wizardAEI/zxjs-front/tree/dev/"
            >更多</a
          ></el-menu-item
        >
        <!-- <el-sub-menu index="2">
        <template #title>Workspace</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>item four</template>
          <el-menu-item index="2-4-1">item one</el-menu-item>
          <el-menu-item index="2-4-2">item two</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu> -->
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { useStore } from '../pinia/store'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
const router = useRouter()
const store = storeToRefs(useStore())
const goHome = () => {
  router.push({
    path: '/',
  })
}
//确定当前的menuIndex
const activeIndex = store.pageIndex
const handleSelect = (key: string, keyPath: string[]) => {}
const menuMode = ref<'vertical' | 'horizontal'>('horizontal')
</script>

<style>
.header {
  z-index: 9;
}
.menu {
  padding-right: 10px;
}
@media (min-width: 769px) {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2f3338;
  }
}
@media (max-width: 769px) {
  .menu {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #2f3338;
  }
}
</style>
